<template>
	<el-dialog title="权限设置" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<!-- <el-tabs tab-position="top">
			<el-tab-pane label="角色权限">
			</el-tab-pane>
		</el-tabs> -->
		<div class="treeMain">
			<el-tree ref="permission" node-key="id" :data="permission.list" :props="permission.props" show-checkbox default-expand-all="true"></el-tree>
		</div>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import setting from './setting'
	import permissionSetting from './../permission/setting'
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				visible: false,
				isSaveing: false,
				permission: {
					list: [],
					checked: [],
					props: {
						label: (data)=>{
							return data.name
						}
					}
				},
				data: {
					dataType :"1",
					list: [],
					checked: [],
					props: {},
					rule: ""
				},
				role: null,
				dashboard: "0",
				dashboardOptions: [
					{
						value: '0',
						label: '数据统计',
						views: 'stats'

					},
					{
						value: '1',
						label: '工作台',
						views: 'work'
					},
				]
			}
		},
		mounted() {
		},
		methods: {
			open(role){
				this.visible = true;
				this.role = role;
				this.loadPermission()
			},
			submit(){
				this.isSaveing = true;

				//选中的和半选的合并后传值接口
				var checkedKeys = this.$refs.permission.getCheckedKeys().concat(this.$refs.permission.getHalfCheckedKeys())
				//console.log(checkedKeys)

				this.save(checkedKeys)

				// setTimeout(()=>{
				// 	this.isSaveing = false;
				// 	this.visible = false;
				// 	this.$message.success("操作成功")
				// 	this.$emit('success')
				// },1000)
			},
			async save(ids){
				var res = await setting.api.permissionSave.post({
					permissionIds: ids,
					id: this.role.id
				});
				this.loading = false
				this.visible = false;
				if(res.code == setting.successCode){
					this.$message.success("操作成功")
				}else{
					this.$message.warning(res.message)
				}

			},
			async loadPermission(){
				let res

				res = await permissionSetting.api.tree.get()
				if(res.code == permissionSetting.successCode){
					this.permission.list = res.data
				}else{
					this.$message.warning(res.message)
					return
				}

				res = await setting.api.permissionList.get({ roleId: this.role.id, pageIndex:1, pageSize: Math.pow(2,30) })
				if(res.code == setting.successCode){
					let selectPermissionIds = res.data.map(item=>item.permissionId)
					this.permission.checked = selectPermissionIds
					this.$nextTick(() => {
						let filterKeys = this.permission.checked.filter(key => this.$refs.permission.getNode(key).isLeaf)
					 	this.$refs.permission.setCheckedKeys(filterKeys, true)
					})
					//this.permission.checked = selectPermissionIds
					//this.$refs.permission.setCheckedKeys(selectPermissionIds)
				}else{
					this.$message.warning(res.message)
					return
				}
				//console.log(res.data)
			}
		}
	}
</script>

<style scoped>
	/* .treeMain {height:300px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;} */
	.treeMain {height:300px;overflow: auto; margin-bottom: 10px;}
</style>
